<template>
	<view class="cart-item">
		<view class="cart-left">
			<u-checkbox-group size="23">
				<u-checkbox @click="checkedEvnet(item)" :checked="item.show" :customStyle="{marginBottom: '8px'}"
					shape="circle" activeColor="#FFCF4F" />
			</u-checkbox-group>
		</view>
		<view class="cart-right">
			<view class="cart-up">
				<view class="cart-img">
					<u-image radius="8" :src="item.img" width="100%" height="100rpx"></u-image>
				</view>
				<view class="cart-info">
					<view class="cart-name u-line-1">{{item.name}}</view>
					<view class="cart-pacie">{{pacieView(item)}}</view>
				</view>
			</view>
			<view class="cart-botem">
				<view class="cart-botemLeft">
					<view class="cart-sku" v-if="item.sku_name">
						<view class="cart-text u-line-1">{{item.sku_name}}</view>
					</view>
				</view>
				<view class="cart-numberbox">
					<button class="numberbox-left cu-btn" @click="numberChange('reduce',item)">
						<view class="numberbox-icon">
							<u-icon name="minus" color="#999" size="15"></u-icon>
						</view>
					</button>
					<view class="numberbox-numbner">{{item.buy_num}}</view>
					<button class="numberbox-left show cu-btn" @click="numberChange('add',item)">
						<view class="numberbox-icon">
							<u-icon name="plus" color="#FFF" size="15"></u-icon>
						</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cart-item",
		props: {
			item: {
				type: Object,
				default: (() => {
					return {}
				})
			}
		},
		data() {
			return {
				checked: true,
				number: 1
			};
		},
		methods: {
			pacieView(e) {
				if (!e.linkSkuPrice.length) {
					return e.price
				}
				if (e.linkSkuPrice.length && e.linkSkuPrice.length < 2) {
					return e.linkSkuPrice[0].price
				}
				let obj = e.linkSkuPrice.find(item => item.id == e.sku_id)
				if (obj) {
					return obj.price
				} else {
					return e.price
				}
			},
			checkedEvnet(e) {
				this.$network('/api/goods/cartModInfo', {
					is_checked: e.show ? 0 : 1,
					id: e.cart_id
				}).then(res => {
					e.show = e.show ? 0 : 1
				})
			},
			numberChange(e, i) {
				if (e == 'reduce') {
					if (i.buy_num < 2) return
					i.buy_num--
				} else {
					i.buy_num++
				}
				this.$network('/api/goods/cartAdd', {
					goods_info: [{
						goods_id: i.id,
						c_num: i.buy_num,
						sku_id:i.sku_id||''
					}]
				})
			},
		}
	}
</script>

<style lang="scss">
	.cart-text {
		max-width: 98%;
	}

	.cart-item {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		align-items: initial;
		justify-content: space-between;
		background: #fff;
		border-radius: 5px;
		padding: 10px 8px;

		.cart-left {
			width: 8%;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.cart-right {
			width: 90%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.cart-botem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.cart-numberbox {
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.numberbox-numbner {
						flex: 1;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #000;
					}

					.numberbox-left {
						width: 50rpx;
						height: 50rpx;
						border: 1px solid #ECECEC;
						border-radius: 50%;
						display: flex;
						align-items: center;
						padding: 0;
						margin: 0;
						background-color: transparent;
						justify-content: center;

						&.show {
							border: none;
							background-color: #FFCF4F;
						}
					}
				}

				.cart-botemLeft {
					width: 65%;

					.cart-sku {
						background: #f9f9f9;
						border-radius: 5px;
						padding: 5px 8px;
						font-size: 25rpx;
						color: #999;
					}
				}
			}

			.cart-up {
				display: flex;
				align-items: initial;
				justify-content: space-between;

				.cart-img {
					width: 18%;
				}

				.cart-info {
					width: 78%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.cart-name {
						font-size: 30rpx;
						color: #333;
					}

					.cart-pacie {
						font-size: 35rpx;
						font-weight: bold;
						color: #000;
						position: relative;
						margin-left: 10px;
					}

					.cart-pacie::after {
						content: '￥';
						position: absolute;
						left: -15px;
						top: 3px;
						font-size: 28rpx;
						color: #000;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>
